<template>
  <div>
    <div id="app">
      <div class="header_con">
        <div class="header">
          <div class="welcome fl">欢迎来到美多商城!</div>
          <div class="fr">
            <div class="login_btn fl">
              欢迎您：<em>{{ username }}</em>
              <span>|</span>
              <a @click="logout">退出</a>
            </div>
            <div class="user_link fl">
            <span>|</span>
            <a href="/user/center/">用户中心</a>
            <span>|</span>
            <a href="/carts/">我的购物车</a>
            <span>|</span>
            <a href="/user/center/order/">我的订单</a>
          </div>
          </div>
        </div>
      </div>

      <div class="search_bar clearfix">
        <a href="index.html" class="logo fl"><img src="/static/images/logo.png"></a>
        <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;提交订单</div>
        <form method="get" action="/search.html" class="search_con fr mt40">
          <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
          <input type="submit" class="input_btn fr" name="" value="搜索">
        </form>
      </div>

      <h3 class="common_title">确认收货地址</h3>

      <div class="common_list_con clearfix">
        <dl>
          <dt>寄送到：</dt>
          <dd v-for='address in addresses' :class="[(nowsite==address.id)?'current':'']" @click="nowsite=address.id">
            <input type="radio" name="get_site" :value="address.id" v-model="nowsite">{{ address.province }}
            {{address.city}} {{ address.district }} {{ address.place }} （{{ address.receiver }} 收） {{ address.mobile }}
          </dd>
        </dl>
        <a href="/user/center/site/" class="edit_site">编辑收货地址</a>
      </div>

      <h3 class="common_title">支付方式</h3>
      <div class="common_list_con clearfix">
        <div class="pay_style_con clearfix">
          <input type="radio" name="pay_style" value="1" v-model="pay_method">
          <label class="cash">货到付款</label>
          <input type="radio" name="pay_style" value="2" v-model="pay_method">
          <label class="zhifubao"></label>
        </div>
      </div>

      <h3 class="common_title">商品列表</h3>

      <div class="common_list_con clearfix">
        <ul class="goods_list_th clearfix">
          <li class="col01">商品名称</li>
          <li class="col03">商品价格</li>
          <li class="col04">数量</li>
          <li class="col05">小计</li>
        </ul>
        <ul class="goods_list_td clearfix" v-for="(sku,index) in skus">
          <li class="col01">{{index+1}}</li>
          <li class="col02"><img :src="host + sku.default_image_url"></li>
          <li class="col03">{{ sku.name }}</li>
          <li class="col05">{{ sku.price }}元</li>
          <li class="col06">{{ sku.count }}</li>
          <li class="col07">{{ sku.amount }}元</li>
        </ul>
      </div>

      <h3 class="common_title">总金额结算</h3>

      <div class="common_list_con clearfix">
        <div class="settle_con">
          <div class="total_goods_count">共<em>{{ total_count }}</em>件商品，总金额<b>{{ total_amount }}元</b></div>
          <div class="transit">运费：<b>{{ freight }}元</b></div>
          <div class="total_pay">实付款：<b>{{ payment_amount }}元</b></div>
        </div>
      </div>

      <div class="order_submit clearfix">
        <a @click="on_order_submit" id="order_btn">提交订单</a>
      </div>

      <div class="footer">
        <div class="foot_link">
          <a href="#">关于我们</a>
          <span>|</span>
          <a href="#">联系我们</a>
          <span>|</span>
          <a href="#">招聘人才</a>
          <span>|</span>
          <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
        <p>电话：010-****888 京ICP备*******8号</p>
      </div>
    </div>

    <div class="popup_con">
      <div class="popup">
        <p>订单提交成功！</p>
      </div>

      <div class="mask"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "PlaceOrder",
    data() {
      return {
        host: host,
        username: sessionStorage.username || localStorage.username,
        user_id: localStorage.user_id,
        token: localStorage.token,
        skus: [],
        freight: 0, // 运费
        total_count: 0,
        total_amount: 0,
        payment_amount: 0,
        order_submitting: false, // 正在提交订单标志
        pay_method: 2, // 支付方式,  1: 货到付款,  2:支付宝
        nowsite: 0, // 默认地址
        addresses: []
      }
    },
    mounted: function () {
      // 获取地址信息
      this.get_address()
      this.get_order_goods()
    },
    methods: {
      get_order_goods() {
        // 获取结算商品信息
        this.axios.get(this.host + '/orders/settlement/', {
          headers: {
            'Authorization': 'JWT ' + this.token
          },
          responseType: 'json'
        })
          .then(response => {
            this.skus = response.data.data;
            this.freight = 10;  // 运费固定10元
            this.total_count = 0;
            this.total_amount = 0;
            for (var i = 0; i < this.skus.length; i++) {
              var amount = parseFloat(this.skus[i].price) * this.skus[i].count;
              this.skus[i].amount = amount.toFixed(2);
              this.total_count += this.skus[i].count;
              this.total_amount += amount;
            }
            this.payment_amount = parseFloat(this.freight) + this.total_amount;
            this.payment_amount = this.payment_amount.toFixed(2);
            this.total_amount = this.total_amount.toFixed(2);
          })
          .catch(error => {
            if (error.response.status == 401) {
              location.href = '/login.html?next=/cart.html';
            } else {
              console.log(error.response.data);
            }
          })
      },
      get_address() {
        var params = {
          user: this.user_id
        }
        this.axios.get(this.host + '/address/', {
          params,
          headers: {
            'Authorization': 'JWT ' + this.token
          },
          responseType: 'json'
        })
          .then(response => {
            // debugger
            this.addresses = response.data.results;
            this.nowsite = localStorage.getItem('default_address_id')
          })
          .catch(error => {
            debugger
            status = error.response.status;
            if (status == 401 || status == 403) {
              location.href = 'login.html?next=/user_center_site.html';
            } else {
              alert(error.response.data.detail);
            }
          })

      },
      // 退出
      logout: function () {
        sessionStorage.clear();
        localStorage.clear();
        location.href = '/login.html';
      },
      // 提交订单
      // 提交订单
      on_order_submit: function () {
        if (this.order_submitting == false) {
          this.order_submitting = true;
          this.axios.post(this.host + '/orders/', {
            address: this.nowsite,
            pay_method: this.pay_method
          }, {
            headers: {
              'Authorization': 'JWT ' + this.token
            },
            responseType: 'json'
          })
            .then(response => {
              alert(response.data.msg)
              if (response.data.code=='999'){
                this.order_submitting = false;
              }else {
              location.href = '/order_success/?order_id=' + response.data.order_id
                + '&amount=' + this.payment_amount
                + '&pay=' + this.pay_method;
              }
            })
            .catch(error => {
              this.order_submitting = false;
              alert(error.response.data[0]);
            })
        }
      }
    }

  }
</script>

<style scoped>

</style>
